<!DOCTYPE html>
<html ng-app="demoapp">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../bower_components/angular/angular.min.js"></script>
        <script src="../bower_components/leaflet/dist/leaflet.js"></script>
        <script src="../dist/angular-leaflet-directive.min.js"></script>
        <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
        <style type="text/css">
            p, h4 { margin: 10px 0; padding: 0; }
            body { margin: 5px; }
            body, html { height: 100%; }
            div#control {
                z-index: 100;
                position: absolute;
                bottom: 1em;
                left: 1em;
                background: white;
                padding: .4em 1em;
                opacity: .8;
                border-radius: 8px;
            }
            input[type=number] { width: 90px }
            div.angular-leaflet-map {
                width: 100%;
                height: 100%;
            }
        </style>
        <script>
            var app = angular.module("demoapp", ["leaflet-directive"]);

            app.controller('PathsAdvancedController', [ '$scope', function($scope) {
                $scope.addMarker = function() {
                    var m_key = document.getElementById('new_mm_name').value;
                    if ($scope.markers[m_key]) return;
                    $scope.markers[m_key] = {
                        lat: document.getElementById('new_mm_lat').value,
                        lng: document.getElementById('new_mm_lng').value,
                        draggable: true
                    };
                    $scope.paths.p1.latlngs.push($scope.markers[m_key]);
                };

                $scope.deleteMarker = function(m_key) {
                    var marker = $scope.markers[m_key];

                    for (var pkey in $scope.paths) {
                        for (var j in $scope.paths[pkey].latlngs) {
                            var p = $scope.paths[pkey].latlngs[j];
                            if (p === marker) {
                                $scope.paths[pkey].latlngs.splice(j, 1);
                            }
                        }
                    }

                    delete $scope.markers[m_key];
                };

                angular.extend($scope, {
                    // set up map center
                    cen: {
                        lat: 53,
                        lng: -3,
                        zoom: 6
                    },
                    // set up multiple markers on map
                    markers: {
                        London : {
                            lat: 51.50,
                            lng: -0.082,
                            draggable: false
                        },
                        Manchester: {
                            lat: 53.48,
                            lng: -2.24,
                            draggable: true
                        },
                        Lincoln: {
                            lat: 53.230495,
                            lng: -0.53936,
                            draggable: true
                        },
	                    Northhampton: {
                            lat: 52.237892,
                            lng: -0.90087,
                            draggable: true
	                    },
	                    Worcester: {
                            lat: 52.187404,
                            lng: -2.20275,
                            draggable: true
	                    },
	                    York: {
		                    lat: 53.959317,
		                    lng: -1.08215,
		                    draggable: true
	                    }
                    }
                });

                angular.extend($scope, {
                    paths: {
                        p1: {
                            color: '#008000',
                            weight: 4,
                            latlngs: [ $scope.markers.London, $scope.markers.Manchester ]
                        },
                        p2: {
                            weight: 3,
                            opacity: 0.5,
                            latlngs: [
	                            [ $scope.markers.London, $scope.markers.Lincoln ],
                                [ $scope.markers.Manchester, $scope.markers.Worcester]
                            ],
	                        type: 'multiPolyline'
                        },
	                    c1: {
		                    weight: 2,
		                    color: '#ff612f',
		                    latlngs: $scope.markers.Northhampton,
		                    radius: 10000,
		                    type: 'circle'
	                    },
	                    c2: {
		                    weight: 2,
		                    color: '#ff612f',
		                    latlngs: $scope.markers.Lincoln,
		                    radius: 50,
		                    type: 'circleMarker'
	                    },
	                    pg1: {
		                    latlngs: [ $scope.markers.London, $scope.markers.Worcester, $scope.markers.Lincoln ],
		                    stroke: false,
		                    fillColor: '#ff69b4',
		                    type: 'polygon'
	                    },
	                    pg2: {
                            weight: 1,
                            color: '#2e3974',
                            latlngs: [
	                            [ $scope.markers.London, $scope.markers.Worcester, $scope.markers.Northhampton ],
                                [ $scope.markers.Manchester, $scope.markers.Lincoln, $scope.markers.York ]
                            ],
		                    type: 'multiPolygon'
	                    },
	                    r1: {
		                    latlngs: [ $scope.markers.Lincoln, $scope.markers.York ],
		                    type: 'rectangle'
	                    }
                    }
                });

            } ]);
        </script>
    </head>
    <body ng-controller="PathsAdvancedController">
        <leaflet lf-center="cen" markers="markers" paths="paths"></leaflet>
        <h1>Advanced Paths Example</h1>
        <div id="control">
            <div class="panel">
                <h3>Center</h3>
                lat: <input type="number" step="any" ng-model="cen.lat" size="8"/>
                lng: <input type="number" step="any" ng-model="cen.lng" size="8"/>
                zoom: <input type="number" ng-model="cen.zoom" size="8"/>
            </div>

            <div class="panel">
                <h3>Markers</h3>
                <div ng-repeat="(name, m) in markers">
                    <p><b>{{name}}</b> ({{ !m.draggable && 'not ' || '' }}draggable):<p>
                    <input type="checkbox" ng-model="m.draggable"/>
                    lat: <input type="number" ng-disabled="!m.draggable" ng-model="m.lat"/>
                    lng: <input type="number" ng-disabled="!m.draggable" ng-model="m.lng"/>
                    <input type="button" value="del" ng-click="deleteMarker(name)"/>
                </div>
                <input id="new_mm_name" type="text" placeholder="name" size="8"/>
                <input id="new_mm_lat" type="text" placeholder="lat" size="10"/>
                <input id="new_mm_lng" type="text" placeholder="lng" size="10"/>
                <input type="button" value="Add marker"
                    ng-click="addMarker()"/>
            </div>

            <div class="panel">
                <h3>Paths</h3>
                <div ng-repeat="path in paths">
                    <p style="display: inline;">color: <input type="color" ng-model="path.color" /> weight: <input type="number" ng-model="path.weight" /></p>
                    <ul>
                        <li ng-repeat="p in path.latlngs">(point {{$index}}) lat: <strong>{{ p.lat | number: 4 }}</strong> lng: <strong>{{ p.lng | number: 4}}</strong></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>
